<template>
  <div class="settingList">
    <div class="main">
      <div class="main_top">
        <el-button size="small" type="primary" @click="addAccount">新建角色</el-button>
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:operate="{ scope }">
          <el-button type="primary" size="mini" @click="openRegion(scope.row)">配置区域</el-button>
          <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">修改权限</el-button>
          <el-button type="primary" size="mini" @click="handleRoleName(scope.row)">编辑角色名称</el-button>
          <el-button @click="handledelete(scope.row.id)" size="mini" type="danger">删除</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog ref="childRef" v-if="detailDialog" :id="id" :path="path" :visible.sync="detailDialog"
      @success="_handleSuccess" />
    <detail-dialog-name v-if="detailDialogName" :id="id" :roleName="roleName" :visible.sync="detailDialogName"
      @success="_handleSuccess" />
    <RegionDialog ref="regionDialog" @refresh="_handleSuccess"></RegionDialog>
  </div>
</template>
<script>
  import store from '@/store'
  // components
  import DetailDialog from "./components/roleList/DetailDialog";
  import DetailDialogName from "./components/roleList/DetailDialogName";
  import RegionDialog from "./components/roleList/regionDialog";
  // api
  import {
    getRoleList,
    getRoleMenus,
    deleteRole
  } from "@/api/setting";

  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "settingList",
    components: {
      DetailDialog,
      DetailDialogName,
      RegionDialog
    },
    mixins: [handlePageMixin],
    data() {

      return {
        loading: false,
        tableColumn: [{
            prop: "roleName",
            label: "角色名称"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: '400'
          },
        ],
        detailDialog: false,
        detailDialogName: false,
        id: '',
        path: 'add',
        tableData: [],
        roleName: '',
      };
    },
    created() {
      this.getList();
      this.$store.dispatch('settings/getMenus')
    },
    mounted() {},
    methods: {
      //列表
      getList() {
        this.loading = true;
        const params = {
          ...this.pageOptions,
        };
        getRoleList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            console.log("账号列表", records);
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
          });
      },

      //新建子账号
      addAccount() {
        this.detailDialog = true;
        this.path = 'add'
      },
      //
      _handleSuccess(data) {
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      //删除
      handledelete(id) {
        this.$confirm("是否删除?", "提示", {
            confirmButtonText: "删除",
            cancelButtonText: "否",
            type: "warning",
          })
          .then(() => {
            deleteRole(id)
              .then((res) => {
                this.handleSuccess("删除成功");
                this.getList();
              })
              .finally(() => {});
          })
          .catch(() => {});
      },

      handleSuccess(msg) {
        if (msg === "已拒绝") {
          var type = "error";
        } else {
          var type = "success";
        }
        this.$message({
          message: msg,
          type: type,
          duration: 1500,
          onClose: () => {
            this.handleClose();
            this.$emit("success");
          },
        });
      },
      //修改权限
      handleEdit(id) {
        this.id = id
        this.path = 'edit'
        this.detailDialog = true;
      },
      //编辑角色名称
      handleRoleName(row) {
        this.id = row.id
        this.roleName = row.roleName
        this.detailDialogName = true
      },
      /** 打开配置区域 */
      openRegion(row) {
        this.$refs.regionDialog.open(row.id);
      },
    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/setting";

  .el-select .el-input {
    width: 130px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
